<template>
  <el-card class="box-card">
    <el-scrollbar>
      <el-table
        :data="tableData"
        border
        stripe
        style="width: 100%"
        @toggleRowSelection="toggleRowSelection"
        @select="selectRow"
        @select-all="selectRow"
      >
        <el-table-column
          v-if="isSelectMult"
          type="selection"
          width="40"
        ></el-table-column>
        <el-table-column
          v-for="(prop, key) in tableField"
          :prop="prop.field"
          :label="prop.label"
          :fixed="prop.fixed"
          :width="prop.width"
        >
          <template
            v-if="prop.type === 'opera'"
            #default="{ row, column, $index }"
          >
            <div class="flex justify-space-between mb-4 flex-wrap gap-4">
              <el-button
                v-for="(but, ind) in prop.opera"
                :type="btnColor(but.type||'default')"
                @click="but.calc(row, column, $index)"
              >
                <el-icon v-if="but.type === 'edit'"><Edit /></el-icon>
                <el-icon v-if="but.type === 'status'"><Warning /></el-icon>
                <el-icon v-if="but.type === 'delete'"><Delete /></el-icon>
                <el-icon v-if="but.type === 'button'">
                  <component :is="but.icon"></component>
                </el-icon>
                {{ but.text }}
              </el-button>
            </div>
          </template>
          <template
            v-if="prop.type === 'tag'"
            #default="{ row, column, $index }"
          >
            <el-tag class="ml-2" type="danger" v-if="row.status == 0">{{
              prop.options[row.status]
            }}</el-tag>
            <el-tag class="ml-2" type="success" v-if="row.status == 1">{{
              prop.options[row.status]
            }}</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-scrollbar>
  </el-card>
  <el-card>
    <div class="pagination-block">
      <el-pagination
        v-if="pagesize != 0"
        small
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="pagesize"
        layout="prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </el-card>
</template>

<script lang="ts" setup>
import { ref, reactive, toRefs, defineProps } from "vue";
const currentPage = ref(1);
const props = defineProps({
  pagesize: Number,
  total: Number,
  tableField: Array,
  tableData: Array,
  isSelectMult: Boolean,
});
const { pagesize, total, tableField, tableData, isSelectMult } = toRefs(props);
const handleClick = (row) => {
  console.log(row);
};

const selectData = ref([]);

const btnColor = (val:String) => {
  const btnObj = {
    edit: "success",
    status: "primary",
    delete: "danger",
    default:''
  };
  return btnObj[val];
};

// 分页每页数据
const handleSizeChange = (val) => {};
// 分页当前页改变
const handleCurrentChange = (val) => {};
// 表格选中
const toggleRowSelection = (row: any, selected: any) => {
  console.log("选择");
  console.log(row, selected);
};
const selectRow = (selection: never[], row: any) => {
  console.log("选择selectRow");
  console.log(selection, row);
  selectData.value = selection;
  console.log(selectData.value.length);
};
</script>
<style lang="less" scoped></style>
